<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <title>Demo</title>
    <script src="http://git.oschina.net/gebing/markdown-charts/raw/master/asset/markdown-charts.js"></script>
  </head>
  <body>
    <div class="markdown-body">
      
<pre><code class="mermaid">graph TD
B[&quot;fa:fa-twitter for peace&quot;]
B--&gt;C[fa:fa-ban forbidden]
B--&gt;D(fa:fa-spinner);
B--&gt;E(A fa:fa-camera-retro perhaps?);
</code></pre>

<pre><code class="plantuml">actor Foo1
boundary Foo2
control Foo3
entity Foo4
database Foo5
Foo1 -&gt; Foo2 : To boundary
Foo1 -&gt; Foo3 : To control
Foo1 -&gt; Foo4 : To entity
Foo1 -&gt; Foo5 : To database
</code></pre>

<pre><code class="echarts">option = {
    title : {
        text: &#39;某站点用户访问来源&#39;,
        subtext: &#39;纯属虚构&#39;,
        x:&#39;center&#39;
    },
    tooltip : {
        trigger: &#39;item&#39;,
        formatter: &quot;{a} &lt;br/&gt;{b} : {c} ({d}%)&quot;
    },
    legend: {
        orient: &#39;vertical&#39;,
        left: &#39;left&#39;,
        data: [&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;]
    },
    series : [
        {
            name: &#39;访问来源&#39;,
            type: &#39;pie&#39;,
            radius : &#39;55%&#39;,
            center: [&#39;50%&#39;, &#39;60%&#39;],
            data:[
                {value:335, name:&#39;直接访问&#39;},
                {value:310, name:&#39;邮件营销&#39;},
                {value:234, name:&#39;联盟广告&#39;},
                {value:135, name:&#39;视频广告&#39;},
                {value:1548, name:&#39;搜索引擎&#39;}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
                }
            }
        }
    ]
};
</code></pre>

    </div>
  </body>
</html>
